import {React, useState, useEffect} from 'react';
import { Layout, Button, Alert , Input } from 'antd';
import {
    EyeInvisibleOutlined, EyeTwoTone 
  } from '@ant-design/icons';
  import './Login.css'
  import {ApiService } from './common/ApiService'

const { Content } = Layout;
const Login = () =>{
    
    const [loginData, setLogin] = useState({ email: '', password: '' });
    const [error, setError] = useState(null);
    useEffect(() => {
      // var token = localStorage.getItem('token');
      // if(token){
      //   location.href = '/MemberInfo'
      // }
    }, []); 

    const handleVisibilityChange = (visible) => {
        // if (visible) {
        //     document.getElementById('robot').src = '../public/images/login/2.png'
        // } else {
        //     document.getElementById('robot').src = '../public/images/login/Group17.svg'
        // }
        //console.log('密码可见性变化:', visible);
        // 在这里可以执行其他逻辑
      };
          const handleSubmit = async (e) => {
            e.preventDefault();
            if(loginData.email == '') {
              alert('Please enter your email');
              return;
            }
            if(loginData.password == '') {
              alert('Please enter your password');
              return;
            }
            try {
              console.log(loginData);
              var response = await ApiService.login(loginData);
              console.log(response.code);
              if (response.code === 0) {
                setLogin({ password: '', email: ''});
                localStorage.setItem('token', response.data);
                location.href = '/MemberInfo';
              } else {
                alert(response.message)
              }
              
            } catch (err) {
              setError(err.message);
            }
          };
    return(
        <Layout>
          <Content style={{
            backgroundColor: '#141E20',
            justifyContent: 'center',
            padding: '50px',
            height: '100vh'
          }}>
            <a href="/"><img src='../public/images/LOGO1.svg' /></a>
            <div className='mainPanel'>
                <div className="loginPanel">
                    <h3>Sign in to Flashblock</h3>
                    <div className='title'>Don't have an account? <a href="Regist">Sign up</a></div>
                    <div className='title1'>Email Address</div>
                    <div className='txt'>
                        <Input className='txt1' value={loginData.username} onChange={(e) => setLogin({...loginData, email: e.target.value})} />
                    </div>
                    <div className='title2'>Password</div>
                    <div className='txt'>
                        <Input.Password className='txt1' iconRender={visible => (visible ? <EyeTwoTone twoToneColor='#31F045' /> : <EyeInvisibleOutlined style={{color:'#31F045'}} />)} 
                        visibilityToggle={{
                            onVisibleChange: handleVisibilityChange
                          }}  value={loginData.password} onChange={(e) => setLogin({...loginData, password: e.target.value})} />
                    </div>
                    <div className='title3'>
                        <a href='/RpsEmail'>Forgot Password?</a>
                    </div>
                    <Button onClick={handleSubmit} style={{fontFamily: 'Inter'}}>Sign In</Button>
                </div>
                <div className='imgRobot'>
                    <img id='robot' src='../public/images/login_robot.svg' />
                </div>
            </div>
      </Content>
    </Layout>
    )
}
export default Login;